<template>
	<view>
		<van-cell-group class="inp">
			<van-field placeholder="请输入搜索关键字" left-icon="/static/img/sousuo.png" />
		</van-cell-group>

		<van-tree-select height="100vh" :items='fenleiData' :main-active-index="mainActiveIndex"
			@click-nav="onClickNav">

			<template #content>
				<image :src="fenleiData[mainActiveIndex].pic" mode="" class="iMg"></image>
				<view class="" v-for="(item,index) in youceData"  @click.native="tiaozhuan(item)">
					<van-card  :num="item.totalStocks" :price="item.price"
						:desc="item.brief" :title="item.prodName" :thumb="item.pic">
					</van-card>
				</view>
			


			</template>

		</van-tree-select>
	</view>
</template>

<script>
	import {
		getFenlei,
		getNeirong
	} from '../../../api/fenlei';
	export default {
		data() {
			return {
				mainActiveIndex: 0,
				fenleiData: [],
				youceData: []
			};
		},
		onShow() {
			this.GetFenLei()
			this.GetNeiRong()
		},
		methods: {
			async GetFenLei() {
				let result = await getFenlei()
				this.fenleiData = result.data.data
				// console.log(this.fenleiData)
				this.fenleiData.forEach((item) => {
					item.text = item.categoryName
				})
				this.GetNeiRong()
			},
			onClickNav(event) {
				this.mainActiveIndex = event.detail.index
				this.GetNeiRong()
			},
			async GetNeiRong() {
				let result = await getNeirong({
					categoryId: this.fenleiData[this.mainActiveIndex].categoryId
				})
				this.youceData = result.data.data.records
				// console.log(this.youceData)
			},
			tiaozhuan(t) {
				
				uni.navigateTo({
					url: `/pages/xiangqing/xiangqing/xiangqing?id=${t.prodId}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.iMg {
		width: 100%;
		height: 200rpx;
	}
</style>